<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('EChart1')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body>
<div class="ui-layout-west" shiro:hasPermission="system:stuDataCer:deptTree">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa fa-sitemap"></i> 组织机构
            </div>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>


<div class="ui-layout-center">
        <div class="ibox-title">
            <h5>饼状图</h5>
            <input id="deptId" type="hidden" value="0" name="deptId">
            <input id="parentId" type="hidden" name="parentId">
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="javascript:;">选项1</a>
                    </li>
                    <li><a href="javascript:;">选项2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <div class="echarts" id="echarts-pie-chart"></div>
        </div>
    </div>
</body>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script type="text/javascript">
    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 185, resizeWithWindow: false });
        // 回到顶部绑定
        if ($.fn.toTop !== undefined) {
            var opt = {
                win:$('.ui-layout-center'),
                doc:$('.ui-layout-center')
            };
            $('#scroll-up').toTop(opt);
        }
        queryDeptTree();
        queryEcharts1();
    });


    function queryEcharts1() {
        var myChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var deptId = $("#deptId").val();
        $.ajax({
            type: "POST",
            url: ctx + 'system/stuDataCer/echartsReviewState/' + deptId,
            dataType: 'json',
            data: {},
            success: function (data) {
                debugger;
                myChart.hideLoading();
                myChart.setOption({
                    title: {
                        text: '证书审核情况',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: data.list
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '55%',
                            center: ['60%', '50%'],
                            data: data.varList,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            }
        });

    }

		function queryDeptTree()
		{
			var url = ctx + "system/certificate/deptTreeData";
			var options = {
		        url: url,
		        expandLevel: 2,
		        onClick : zOnClick
		    };
			$.tree.init(options);

			function zOnClick(event, treeId, treeNode) {
				$("#deptId").val(treeNode.id);
				$("#parentId").val(treeNode.pId);
				queryEcharts1();
			}
		}

		$('#btnExpand').click(function() {
			$._tree.expandAll(true);
		    $(this).hide();
		    $('#btnCollapse').show();
		});

		$('#btnCollapse').click(function() {
			$._tree.expandAll(false);
		    $(this).hide();
		    $('#btnExpand').show();
		});

		$('#btnRefresh').click(function() {
			queryDeptTree();
		});
</script>
</html>